<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="hobbys">
				爱好：
				<input type="checkbox" name="hobby"  value="1" />唱
				<input type="checkbox" name="hobby"  value="2" />跳
				<input type="checkbox" name="hobby"  value="3" />rap
				<input type="checkbox" name="hobby"  value="4" />篮球
			</div>
			<button type="button" class="btn">提交</button>
		</div>
		<div class="d1">
			
		</div>
	</body>
	<script type="text/javascript">
		var hobbys=document.querySelectorAll("#box>.hobbys>input[type='checkbox']");
		var btn=document.querySelector(".btn");
		var d1=document.querySelector(".d1");
		if (localStorage.ss) {
			var arr0=JSON.parse(localStorage.ss);
			// show(arr0)
		} else{
			var arr0=[];
			localStorage.ss=JSON.stringify(arr0);
		}
		btn.onclick = function(){
			// 声明一个空数组
			var arr=[];
			// 循环找到想要选取的值
			for(var i=0;i<hobbys.length;i++){
				if (hobbys[i].checked) {
					arr.push(hobbys[i].value);
				}
			}
			console.log("arr:",arr );
			var obj={
				hobby:arr
			}
			arr0.push(obj);
			localStorage.ss=JSON.stringify(arr0);
			show(arr0);
		}
		function show(arr){
			d1.innerHTML="";
			for(var i=0;i<arr.length;i++){
				d1.innerHTML+=`
				    <div>${hobbyFn(arr[i].hobby)}</div>
				`;
			}
		}
		function hobbyFn(arr){
			var arr1 = ["唱","跳","rap","篮球"];
			var arr2 = [];
			for(var i=0;i<arr.length;i++){
				arr2.push(arr1[arr[i]-1]);
			}
			return arr2.join(" ")
		}
	</script>
</html>
